<!DOCTYPE html>
<html>
    <head>
        <title>Home page</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
        <link rel="shortcut icon" href="img/favicon64.png" type="image/png">
        <link href="css/styles.css" type="text/css" rel="stylesheet">
        
        <script type="text/javascript" src="vendor/jquery-2.1.1.min.js"></script>         
        <script type="text/javascript" src="js/check.js"></script>
    </head>
    <body>
        <header>
            <div class="container">
                <h1>
                    <a href="/" title="Tevazbez">
                    <i class="icon brand"></i>
                        <span>
                            Sak malé
                        </span>
                    </a>
                </h1>
            </div>
        </header>
        <div class="content container">
            <div class="tile wide">
                <h1>Welcome to Sak malé!</h1>
                <p>I am so happy that you use this system. You are awesome!</p>
                <p>Please read how to achieve the best expierence by pressing the button below.</p>
                <a class="button inline primary" href="javascript:void(0)">How to use</a>
                <a class="button inline" href="javascript:void(0)">Close</a>
            </div>
            <div class="tile large">
                <h1>Status</h1>
                <div class="stats">
                    <span class="key">Bank account</span>
                    <span class="value">$2000</span>
                </div>
                <div class="stats">
                    <span class="key">Credit card</span>
                    <span class="value">$424</span>
                </div>
                <div class="stats">
                    <span class="key">
                        Some very long and inattractive name
                    </span>
                    <span class="value">$25</span>
                </div>
                
                <h2>Last actions</h2>
                <div class="report">
                    <table>
                        <tbody>
                            <tr>
                                <td>
                                    19.12.2014
                                </td>
                                <td>
                                    Feet jacusi
                                </td>
                                <td>
                                    $99
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    17.12.2014
                                </td>
                                <td>
                                    8 buys at the market
                                </td>
                                <td>
                                    $8
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                    
                <h2>Last epic actions</h2>
                <div class="report">
                    <table>
                        <tbody>
                            <tr>
                                <td>
                                    19.12.2014
                                </td>
                                <td>
                                    Feet jacusi
                                </td>
                                <td>
                                    $99
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    13.08.2014
                                </td>
                                <td>
                                    Skoda Roomster
                                </td>
                                <td>
                                    $2700
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="tile small">
                <h1>Most popular actions</h1>
                <a class="button" href="javascript:void(0)">Report income</a>
                <a class="button" href="outcome.html">Report outcome</a>
                <a class="button" href="javascript:void(0)">Plan shopping</a>
            </div>
       
            <div class="tile wide">
                <h1>All actions</h1>
                <div class="button-group inline up" id="report-button-group" data-role="button-group">
                    <a class="button open-group" href="javascript:void(0)" data-role="button-group-header" data-target="#report-button-group">
                        Report
                    </a>
                    <div class="button-group-menu" data-role="button-group-menu" data-target="#report-button-group">
                        <a class="button" href="javascript:void(0)">
                            Income
                        </a>
                        <a class="button" href="javascript:void(0)">
                            Outcome
                        </a>
                        <a class="button" href="javascript:void(0)">
                            Periodic income
                        </a>
                        <a class="button" href="javascript:void(0)">
                            Periodic outcome
                        </a>
                    </div>
                </div>
                <div class="button-group inline up" id="stats-button-group" data-role="button-group">
                    <a class="button open-group" href="javascript:void(0)" data-role="button-group-header" data-target="#stats-button-group">
                        Stats & Diagrams
                    </a>
                    <div class="button-group-menu" data-role="button-group-menu" data-target="#stats-button-group">
                        <a class="button" href="javascript:void(0)">
                            Balance
                        </a>
                        <a class="button" href="javascript:void(0)">
                            Income & Outcome
                        </a>
                        <a class="button" href="javascript:void(0)">
                            Outcome categories
                        </a>
                    </div>
                </div>
                <div class="button-group inline up" id="plan-button-group" data-role="button-group">
                    <a class="button open-group" href="javascript:void(0)" data-role="button-group-header" data-target="#plan-button-group">
                        Plan
                    </a>
                    <div class="button-group-menu" data-role="button-group-menu" data-target="#plan-button-group">
                        <a class="button" href="javascript:void(0)">
                            Add to buy list
                        </a>
                        <a class="button" href="javascript:void(0)">
                            The Epic Buy
                        </a>
                    </div>
                </div>
                <div class="button-group inline up" id="manage-button-group" data-role="button-group">
                    <a class="button open-group" href="javascript:void(0)" data-role="button-group-header" data-target="#manage-button-group">
                        Manage
                    </a>
                    <div class="button-group-menu" data-role="button-group-menu" data-target="#manage-button-group">
                        <a class="button" href="javascript:void(0)">
                            Operations
                        </a>
                        <a class="button" href="javascript:void(0)">
                            Money sources
                        </a>
                        <a class="button" href="javascript:void(0)">
                            Family members
                        </a>
                    </div>
                </div>
            </div>
            <div class="clear"></div>
        </div>
        <footer class="footer">
            <div class="container">
                (c) Copyright 2015, Alex Kashcheyev
                <span class="license">
                    Visit 
                    <a href="https://code.google.com/p/sak-male-html/wiki/ThirdParty" title="ThirdParty" data-role="new-tab">
                        project wiki page
                    </a> 
                    to check licenses of 3rd party products that I use.
                </span>
            </div>
        </footer>
        
        <div class="modal-backdrop" data-role="nojs"></div>
        <div class="modal" data-role="nojs">
            <header>
                <h1>It's not rocket science</h1>
            </header>
            <div class="content">
                <p>
                    Javascript seems to be disabled in your browser. Please enable it and push the button below or refresh this page.
                </p>
                <p>
                    <a class="button" href="/">
                        Refresh
                    </a>
                </p>
            </div>
        </div>  
        
        <div class="modal-backdrop" id="modal-backdrop"></div>
        
        <script type="text/javascript" src="js/newtab.js"></script>
        <script type="text/javascript" src="js/button-group.js"></script>
    </body>
</html>
